<!--设置评分维度-->
<template>
  <el-drawer
    v-model="open"
    title="设置评分维度"
    :with-header="true"
    size="80%"
    class="dimension-drawer"
    :append-to-body="true"
    :close-on-click-modal="false"
    :before-close="closeW"
  >
    <div class="content">
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button type="primary" plain @click="handleAdd">
            添加评分模版
          </el-button>
        </el-col>
      </el-row>
      <el-alert
        type="warning"
        :closable="false"
        style="font-size: 14px; color: #666"
      >
        <template v-slot:title>
          <div class="t1">功能介绍</div>
          <div class="t2">
            1、最多可设置25套模板，每套可设置最多10个评分维度；
          </div>
          <div class="t2">
            2、老师对上课学员点评时，默认显示该课程关联的评分模板，也可手动切换其他任意模板。
          </div>
        </template>
      </el-alert>
      <el-table v-loading="loading" :data="list" border>
        <el-table-column label="评分模板" align="center" prop="name" />
        <el-table-column label="评分维度" align="center" prop="labelName" />
        <el-table-column label="关联课程" align="center" prop="courseName" />
        <el-table-column label="启用状态" align="center" prop="state">
          <template #default="scope">
            <el-switch
              v-model="scope.row.state"
              inline-prompt
              size="large"
              :active-value="1"
              :inactive-value="0"
              active-text="正常"
              inactive-text="停用"
              @change="changeState(scope.row)"
            />
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          width="120"
          class-name="small-padding fixed-width"
        >
          <template #default="scope">
            <el-button link type="primary" @click="handleUpdate(scope.row)">
              编辑
            </el-button>
            <el-button link type="primary" @click="handleDelete(scope.row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
  </el-drawer>
  <ScoringTemplate ref="templateRef" @refreshPage="initPage" />
</template>

<script setup>
import ScoringTemplate from "./scoringTemplate.vue";
import {
  getTemplateListAPI,
  deleteTemplateAPI,
  changeTemplateStatusAPI,
} from "@/api/interaction/comment";

const { proxy } = getCurrentInstance();
const loading = ref(false);
const open = ref(false);
const templateRef = ref(null);
const total = ref(0);

const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
  },
});

const { queryParams, form } = toRefs(data);

const list = ref([]);
// 事件-----------------------------------------------------------------------------------------------------------
function closeW() {
  open.value = false;
}

function openW() {
  initPage();
  open.value = true;
}

function handleAdd() {
  templateRef.value.openW();
}

function handleUpdate(row) {
  templateRef.value.openW(row);
  // form.value = JSON.parse(JSON.stringify(row));
  // open.value = true;
  // title.value = "编辑课程";
  // openDisabled.value = false;
}

function handleDelete(row) {
  proxy.$modal
    .confirm('是否确认删除"' + row.name + '"？')
    .then(function () {
      return deleteTemplateAPI({ id: row.id });
    })
    .then(() => {
      initPage();
      proxy.$modal.msgSuccess("删除成功");
    })
    .catch(() => {});
}

function changeState(row) {
  proxy.$modal
    .confirm("确认停用此评分维度？")
    .then(function () {
      changeTemplateStatusAPI({
        id: row.id,
        state: row.state,
      })
        .then((response) => {
          proxy.$modal.msgSuccess("操作成功");
          getList();
        })
        .catch(() => {
          loading.value = false;
        });
    })
    .catch(() => {
      getList();
    });
}

// 方法-----------------------------------------------------------------------------------------------------------

function getList() {
  loading.value = true;
  getTemplateListAPI(proxy.addDateRange(queryParams.value, [])).then(
    (response) => {
      list.value = response.rows;
      total.value = response.total;
      loading.value = false;
    }
  );
}
function initPage() {
  queryParams.value.pageNum = 1;
  getList();
}

defineExpose({ openW }); // 用于父组件调用
</script>

<style lang="scss" scoped>
.t1 {
  font-size: 14px;
  font-weight: 400;
  color: #333;
  line-height: 20px;
  margin-bottom: 5px;
}
.t2 {
  font-size: 14px;
  font-weight: 400;
  color: #999;
  line-height: 20px;
  margin-bottom: 3px;
}
</style>
